<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      run(async function () {
        const { directLine, store } = testHelpers.createDirectLineEmulator();
        const {
          React: { createElement },
          ReactDOM: { render },
          WebChat: {
            Components: { BasicWebChat, Composer, ThemeProvider },
            ReactWebChat,
            renderWebChat
          }
        } = window;

        const activityMiddleware = [
          () =>
            next =>
            (...args) => {
              const nextComponent = next(...args);

              return (...args) =>
                createElement(
                  'div',
                  { style: { outline: 'dashed 2px Red', outlineOffset: '0 -4px' } },
                  nextComponent(...args)
                );
            }
        ];

        const attachmentMiddleware = [
          () =>
            next =>
            (...args) =>
              createElement('div', { style: { outline: 'dashed 2px Green', outlineOffset: '-4px' } }, next(...args))
        ];

        render(
          createElement(
            ThemeProvider,
            { activityMiddleware, attachmentMiddleware, styleOptions: { bubbleBackground: '#fee' } },
            createElement(ReactWebChat, { directLine, store })
          ),
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        directLine.emulateIncomingActivity(
          'Minim pariatur magna ipsum exercitation est duis ullamco sunt. Laborum excepteur adipisicing et cillum amet quis ea minim irure. Dolor nostrud ipsum officia exercitation mollit dolore labore proident non excepteur. Nostrud tempor enim magna eiusmod.'
        );

        await host.snapshot();
      });
    </script>
  </body>
</html>
